<template>
  <div id="newsList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords" placeholder="搜索资讯标题或发布者名称"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索</el-button>
    <el-button type="primary" size="small" icon="el-icon-plus" @click="updateInfo">添加资讯</el-button>
    <div style="display: inline-block;margin-left: 20px;font-size:14px;">
      <el-radio v-model="filter" label='all' @change="searchHandle">所有资讯</el-radio>
      <el-radio v-model="filter" label='my' @change="searchHandle">我的资讯</el-radio>
    </div>

    <el-table
        height="536"
        :data="newsList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
        <el-table-column
            label="资讯封面"
            align="center"
            show-overflow-tooltip>
          <template slot-scope="scope" >
            <el-image :src="scope.row.coverUrl"   style="height:45px;width:70%;"></el-image>
          </template>
        </el-table-column>
      <el-table-column
          label="资讯标题"
          prop="newsTitle"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="发布者"
          prop="adminName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="资讯内容"
          prop="newsContent"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="资讯"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.state == 1 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column
          label="发布时间"
          prop="createTime"
          sortable
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="240%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="详细信息" placement="top" >
            <el-button @click="detailInfo(scope.row)" size="mini" type="success" class="iconfont icon-xiangqing"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="上架" placement="top" >
            <el-button v-show="scope.row.state == 0" style="margin-left: 10px" @click="disableHandle(scope.row.newsId,scope.row.newsTitle,scope.row.newsState)" type="warning" size="mini" class="iconfont icon-xiajiaxiawu"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="下架" placement="top" >
            <el-button v-show="scope.row.state == 1" @click="disableHandle(scope.row.newsId,scope.row.newsTitle,scope.row.newsState)" type="success" size="mini" class="iconfont icon-shangjia"></el-button>
          </el-tooltip>
          <el-tooltip   class="item" effect="light" content="编辑" placement="top" >
            <el-button v-show="level" @click="updateInfo(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
          </el-tooltip>
          <el-tooltip v-show="level"  class="item" effect="light" content="删除" placement="top" >
            <el-button  @click="deleteHandle(scope.row.newsId,scope.row.newsTitle)" size="mini" icon="el-icon-delete" type="danger"></el-button>
          </el-tooltip>
          
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
    <el-dialog title="文章浏览" center :visible.sync="detailInfoVisible" width="60%" :close-on-click-modal="false"
               :lock-scroll="false">
      <el-descriptions  direction="vertical" :column="2" size="small" border>
        <el-descriptions-item>
          <template slot="label">
            文章标题
          </template>
          {{ news.newsTitle }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            发布者
          </template>
          {{ news.adminName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            文章内容
          </template>
          <div style="white-space: pre-line">
            {{news.newsContent}}
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {delnews, getNewsList , shelveNews,} from "../../network/admin";

export default {
  name: "NewsManage",
  data(){
    return{
      newsList:[],
      news:{},
      loading:true,
      keywords:'',
      value:false,
      currentPage:1,
      total:1,
      pageSize:6,
      detailInfoVisible:false,
      filter:'all',
      level:false,
      del:false
    }
  },

  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods:{
    handleCurrentChange(currentPage){
      getNewsList(this.keywords,currentPage,this.pageSize,this.filter).then(res=>{
        this.loading=false;
        this.total=res.data.data.total;
        this.newsList=res.data.data.list;
        this.currentPage=currentPage;
      })
    },
    searchHandle(){
      if(this.filter=='my'){
        this.level=true;
      }else{
        this.level=false;
      }
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    deleteHandle(newsId,newsTitle){
      this.$confirm('你确定要删除文章"' + newsTitle + '"吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delnews(newsId).then(res=>{
          this.$message.success('文章'+newsTitle+res.data.data);
          this.handleCurrentChange(this.currentPage)
        }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    disableHandle(newsId, newsTitle, newsState) {
      shelveNews(newsId).then(res => {
        if (res.data.code == 100) {
          this.$message.success('资讯' + newsTitle + (newsState == 1 ? '下架' : '上架') + '成功');
        }
        this.handleCurrentChange(this.currentPage)
      }).catch()
    },
    indexMethod(index) {
      return (this.currentPage-1)*this.pageSize+1 + index;
    },
    detailInfo(news){
      this.detailInfoVisible = true;
      this.news = news;
    },
    updateInfo(news){
      this.$router.push({name: 'editNews', params: {key: news}});
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label{
  min-width: 130px;
  height:50px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}
.el-form-item__content{
  height:50px;
}
</style>